!<template>
  <div class="main">
    <!-- 折叠展开 -->
    <fold
      class="fold"
      :collapsed="collapsed"
      icon="md-menu"
      @on-change="handleCollpasedChange"
    ></fold>
    <!-- 面包屑 -->
    <crumbs class="crumbs"></crumbs>
    <!-- 登录 -->
    <register class="register"></register>
  </div>
</template>
<script>
import crumbs from "./crumbs/index.vue";
import register from "./register/index.vue";
import fold from "./fold/index.vue";
export default {
  data() {
    return {};
  },
  props: {
    collapsed: Boolean,
  },
  components: {
    crumbs,
    register,
    fold,
  },
  methods: {
    handleCollpasedChange(state) {
      // 子父传值
      this.$emit("on-coll-change", state);
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  height: 64px;
  line-height: 64px;
  vertical-align: middle;
  display: flex;
  justify-content: space-between;
  .fold {
    box-sizing: border-box;
    flex: 1;
    border: 1px solid red;
  }
  .crumbs {
    flex: 7;
    border: 1px solid red;
  }
  .register {
    flex: 2;
    border: 1px solid red;
  }
}
</style>